<template>
  <div>
    <!-- 搜索 -->
    <!-- 技术报告录入 - 故障现象选择 -->
    <TopFilter :list="topFilterInit" :cols="2" :collapse="collapse" labelWidth="100" @filterChange="changeHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      height="auto"
      selectionType="single"
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'records'"
      :isPagination = true
      :fetchapi="fetchApi"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange">
    </FilterTable>
    <div style="margin-bottom: 3rem;"></div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <multiuse-button type="primary" :click="saveDialog.bind()" :disabled="disableds">添 加</multiuse-button>
      <multiuse-button @click="closeDialog" >关 闭</multiuse-button>
    </div>
  </div>
</template>
<script>
import { getFailurePhenomenonListByPage } from '@/api/dictionary/index';
import {getSysName1List,getSysName2List,getSysName3List,getSysName4List,getFaultName } from '@/api/claim/dealer/ClaimApplication/index';

export default {
  // mixins: [dictionary],
  data() {
    return {
      disableds: true,
      dataList: [],
      visible: false,
      visibleDrawer: false,
      collapse: false,
      infoId: null,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      fetchApi: getFailurePhenomenonListByPage,
      fetchParams: { faStatus: 1,sysName1:null,sysName2:null,sysName3:null,sysName4:null }, //ipa 接口
      selectedRows: [] //选中经销商
    };
  },
  async  created() {
    const res3 = await getSysName1List();
    if (res3.resultCode == 200) {
      this.topFilterInit.find(x => x.fieldName == 'sysName1').itemList = res3.data.map(y => ({ text: y.sysName1, value: y.sysCode1 }));
      //{ text: y.sysName1, value: y.faultId }
    }
  },
  methods: {
    //搜索数据
    topFilterInitFun() {
      return [
        {
          type: 'INPUT',
          label: '一级代码',
          fieldName: 'sysCode1',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '一级名称',
          fieldName: 'sysName1',
          placeholder: '请选择...',
          disabled: false,
          itemList: [],
          rules: [{required: false, message: '请选择一级名称...', trigger: 'change'}],
          change: val => {
            this.changeSysName1Select(val);
            let list = this.topFilterInit.find(x => x.fieldName === 'sysName1').itemList;
            this.topFilterInit.find(x => x.fieldName == 'sysCode1').initialValue =list.find(x => x.value === val).value;

          }
        },
        {
          type: 'INPUT',
          label: '二级代码',
          fieldName: 'sysCode2',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '二级名称',
          fieldName: 'sysName2',
          placeholder: '请选择...',
          disabled: false,
          itemList: [],
          rules: [{required: false, message: '请选择二级名称...', trigger: 'change'}],
          change: val => {
            let list1 = this.topFilterInit.find(x => x.fieldName === 'sysName2').itemList;
            this.topFilterInit.find(x => x.fieldName == 'sysCode2').initialValue =list1.find(x => x.value === val).value;
            this.changeSysName2Select(val);
          }

        },
        {
          type: 'INPUT',
          label: '三级代码',
          fieldName: 'sysCode3',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '三级名称',
          fieldName: 'sysName3',
          placeholder: '请输入...',
          disabled: false,
          itemList: [],
          rules: [{required: false, message: '请选择三级名称...', trigger: 'change'}],
          change: val => {
            let list2 = this.topFilterInit.find(x => x.fieldName === 'sysName3').itemList;
            this.topFilterInit.find(x => x.fieldName == 'sysCode3').initialValue =list2.find(x => x.value === val).value;
            this.changeSysName3Select(val);

          }
        },
        {
          type: 'INPUT',
          label: '故障代码',
          fieldName: 'sysCode4',
          placeholder: '请输入...',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '故障描述',
          fieldName: 'sysName4',
          placeholder: '请输入...',
          disabled: false,
          itemList: [],
          rules: [{required: false, message: '请选择故障描述...', trigger: 'change'}],
          change: val => {
            let list3 = this.topFilterInit.find(x => x.fieldName === 'sysName4').itemList;
            this.topFilterInit.find(x => x.fieldName == 'sysCode4').initialValue =list3.find(x => x.value === val).value;
            this.getFaultNameSelect(val);
          }
        },
        { type: 'INPUT', label: '故障现象代码', fieldName: 'faultCode', placeholder: '请输入...', initialValue: ''},
      ];
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({},val,{
        faStatus: 1,sysName1:null,sysName2:null,sysName3:null,sysName4:null
      });
      console.log(val);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {title: '一级故障', dataIndex: 'sysCode1', sorter: true},
        {title: '一级名称', dataIndex: 'sysName1', sorter: true},
        {title: '二级故障', dataIndex: 'sysCode2', sorter: true},
        {title: '二级名称', dataIndex: 'sysName2', sorter: true},
        {title: '三级故障', dataIndex: 'sysCode3', sorter: true},
        {title: '三级名称', dataIndex: 'sysName3', sorter: true},
        {title: '故障代码', dataIndex: 'sysCode4', sorter: true},
        {title: '故障名称', dataIndex: 'sysName4', sorter: true},
        {title: '故障现象代码', dataIndex: 'faultCode', sorter: true},
        {title: '故障现象名称', dataIndex: 'faultName', sorter: true, width: 300}
      ];
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      this.disableds = this.selectedRows.length <= 0;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      for(let i = 0 ; i < this.selectedRows.length; i++){
        this.selectedRows[i].faId = this.selectedRows[i].faultId;
      }
      this.$emit('save', this.selectedRows);
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    async changeSysName1Select(sysCode1) {
      this.topFilterInit.find(item=>item.fieldName==='sysName2').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysCode2').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysName2').itemList = [];
      this.topFilterInit.find(item=>item.fieldName==='sysName3').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysCode3').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysName3').itemList = [];
      this.topFilterInit.find(item=>item.fieldName==='sysName4').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysCode4').initialValue = '';
      this.topFilterInit.find(item=>item.fieldName==='sysName4').itemList = [];
      if (sysCode1) {
        const res = await getSysName2List(sysCode1);
        if (res.resultCode === 200) {
          this.topFilterInit.find(item=>item.fieldName==='sysName2').itemList = res.data.map(x => ({ text: x.sysName2,value:x.sysCode2 }));
        }
      }
    },

    async changeSysName2Select(sysCode2) {
      const sysCode1 = this.topFilterInit.find(item=>item.fieldName==='sysCode1').initialValue;
      if (sysCode1 && sysCode2) {
        this.topFilterInit.find(item=>item.fieldName==='sysName3').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysCode3').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysName3').itemList = [];
        this.topFilterInit.find(item=>item.fieldName==='sysName4').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysCode4').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysName4').itemList = [];
        const res = await getSysName3List(sysCode1,sysCode2);
        if (res.resultCode === 200) {
          this.topFilterInit.find(item=>item.fieldName==='sysName3').itemList = res.data.map(x => ({ text: x.sysName3,value:x.sysCode3 }));
        }
      }
    },
    async changeSysName3Select(sysCode3) {
      const sysCode1 = this.topFilterInit.find(item=>item.fieldName==='sysCode1').initialValue;
      const sysCode2 = this.topFilterInit.find(item=>item.fieldName==='sysCode2').initialValue;
      if (sysCode1 && sysCode2 &&sysCode3) {
        this.topFilterInit.find(item=>item.fieldName==='sysName4').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysCode4').initialValue = '';
        this.topFilterInit.find(item=>item.fieldName==='sysName4').itemList = [];
        const res = await getSysName4List(sysCode1,sysCode2,sysCode3);
        if (res.resultCode === 200) {
          this.topFilterInit.find(item=>item.fieldName==='sysName4').itemList = res.data.map(x => ({ text: x.sysName4,value:x.sysCode4 }));
        }
      }

    },

    async getFaultNameSelect(sysCode4){
      const sysCode1 = this.topFilterInit.find(item=>item.fieldName==='sysCode1').initialValue;
      const sysCode2 = this.topFilterInit.find(item=>item.fieldName==='sysCode2').initialValue;
      const sysCode3 = this.topFilterInit.find(item=>item.fieldName==='sysCode3').initialValue;
      if (sysCode1 && sysCode2 &&sysCode3 && sysCode4) {
        const res = await getFaultName(sysCode1,sysCode2,sysCode3,sysCode4);
        if (res.resultCode === 200) {
          this.topFilterInit.find(x => x.fieldName == 'faultName').initialValue = res.data[0].faultName;
          this.topFilterInit.find(x => x.fieldName == 'faultCode').initialValue = res.data[0].faultCode;
          this.faultId = res.data[0].faultId;
        }
      }
    },
  }
};
</script>

<style lang="less" scoped></style>
